<template>
  <view class="big">
    <scroll-view class="trade" scroll-x="true">
      <view class="texts" v-for="(tab,index) in tabBars" :key="tab.id" :class="curr==index?'active':''"
        @click="checkIndex(index)">
        {{tab.name}}
      </view>
    </scroll-view>
    <view class="" v-if="curr === 0">
      <stationOrderList :stationId='stationId'></stationOrderList>
    </view>
    <view class="" v-if="curr === 1">
      <pileList :stationId='stationId'></pileList>
    </view>
    <view class="" v-if="curr === 2">
      <connectorList :stationId='stationId'></connectorList>
    </view>
    <view class="" v-if="curr === 3">
      <MapContainer></MapContainer>
      <siteInfo></siteInfo>
    </view>
    <view class="" v-if="curr === 4">
      <billing :stationId='stationId'></billing>
    </view>
    <view class="colorB" v-if="curr === 5">
      客户管理
    </view>
    <view class="colorB" v-if="curr === 6">当前配置二维码规则：
      {{stationDetail.qrcodePrefix}}
    </view>
    <view class="" v-if="curr === 7">
      <whitelist :stationId='stationId'></whitelist>
    </view>

  </view>

</template>

<script>
  import stationOrderList from '@/stationList/component/stationOrderList.vue'
  import pileList from '@/stationList/component/pileList.vue'
  import connectorList from '@/stationList/component/connectorList.vue'
  import MapContainer from '@/stationList/component/mapContainer.vue'
  import siteInfo from '@/stationList/component/siteInfo.vue'
  import billing from '@/stationList/component/billing.vue'
  import whitelist from '@/stationList/component/whitelist.vue'
  import {
    getStationInfo
  } from "@/api/pile/station";

  export default {
    components: {
      stationOrderList,
      pileList,
      connectorList,
      billing,
      MapContainer,
      siteInfo,
      whitelist
    },
    data() {
      return {
        stationId: null,
        curr: 0,
        stationDetail: {},
        stationLat: null,
        stationLng: null,
        tabBars: [{
          name: '订单',
          id: '0'
        }, {
          name: '设备',
          id: '1'
        }, {
          name: '充电接口',
          id: '2'
        }, {
          name: '基本资料',
          id: '3'
        }, {
          name: '计费模板',
          id: '4'
        }, {
          name: '客户管理',
          id: '5'
        }, {
          name: '运营管理',
          id: '6'
        }, {
          name: '站点白名单',
          id: '7'
        }],
      }
    },
    onLoad(e) {
      this.stationId = e.id
      this.queryStationInfo()
    },

    methods: {
      setCurr(e) {
        // console.log(e.detail.current)
        let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
        // console.log(thisCurr)
        this.curr = thisCurr;
      },
      checkIndex(index) {
        console.log(index)
        this.curr = index;
      },
      queryStationInfo() {
        console.log("stationId", this.stationId);
        getStationInfo(this.stationId).then((res) => {
          // console.log(res);
          this.stationDetail = res.data;
          this.stationLat = res.data.stationLat
          this.stationLng = res.data.stationLng
          console.log(this.stationLat, this.stationLng, this.stationDetail, "父组件里面的经纬度")
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .trade {
    white-space: nowrap;
    width: 100%;
    display: flex;
    justify-content: space-around;
    color: #007AFF;
    overflow: auto;
  }

  .texts {
    display: inline-block;
    width: 20%;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    // padding: 10px 0;
  }

  .trade view {
    // text-align: center;
    // padding-left: 25upx;
  }

  .trade .texts.active {
    border-bottom: 8rpx solid #F0AD4E;
  }
</style>